<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-image: url("images/background.jpg");
        }

        .headers {
            width: 1000px;
            height: 6.25rem;
            margin: 3.125rem auto;
            padding-left: 3.125rem;
        }

        .spa1 {
            font-size: 24px;
            font-weight: bold;
        }

        section {
            width: 100%;
            height: 31.25rem;
        }

        .ancestor {
            margin-top: 1.25rem;
            width: 100%;
            height: 31rem;
            border: #000000 0.625rem;
            text-align: center;
        }

        .child {
            width: 18.75rem;
            height: 100%;
            background-color: white;
            display: inline-block;
            margin: 0 3.125rem 0 3.125rem;
            border: white 0.125rem;
        }

        .span-div {
            padding-left: 0.3125rem;
            text-align: left;
            width: 100%;
            height: 1.25rem;
            line-height: 2.5rem
        }

        .span-div .span-title {
            color: #F39C12;
            font-weight: bold;
        }

        .span-div .span-foot {
            color: #F39C12;
            float: right;
            padding-right: 1.25rem;
            font-weight: bold;
        }

        .span-div .span-body {
            padding-left: 1.25rem;
        }
    </style>
</head>
<body>
<div data-th-include="febs/views/travel/header"></div>
<div class="handers">
    <span class="spa1">Virtual Scenic Experience Area</span>
</div>
<section>
    <div class="ancestor">
        <div class="child">
            <img th:src="@{images/greatwall.png}"
                 onclick=window.open("http://tour.quanjingke.com/xiangmu/CGA/333/pc.html")
                 style="width: 100%;height: 20rem"/>
            <div class="span-div">
                <span class="span-title">Travel</span><br/>
                <span class="span-body">Changes brought about by the epidemic to tourism:</span>
                <span>VR technology</span><br/>
                <span class="span-foot">
							<button style="background-color: blue;color: #FFFFFF;border-radius: 0.3125rem;">View More</button>
						</span><br/>
            </div>
        </div>
        <div class="child">
            <img th:src="@{images/potala.png}"
                 onclick=window.open("http://tour.quanjingke.com/xiangmu/CGA/494/pc.html")
                 style="width: 100%;height: 20rem"/>
            <div class="span-div">
                <span class="span-title">Commerce</span><br/>
                <span class="span-body">To provide safer travel services:</span><br/>
                <span>Contactless Payment (online banking)</span><br/>
                <span class="span-foot">
							<button style="background-color: blue;color: #FFFFFF;border-radius: 0.3125rem;">View More</button>
						</span><br/>
            </div>
        </div>
        <div class="child">
            <img th:src="@{images/garden.jpg}"
                 onclick=window.open("http://tour.quanjingke.com/xiangmu/CGA/103/pc.html")
                 style="width: 100%;height: 20rem"/>
            <div class="span-div">
                <span class="span-title">Lesson from SARS</span><br/>
                <span class="span-body">Relevant epidemic prevention tips:</span><br/>
                <span>Real-time news</span><br/>
                <span class="span-foot">
							<button style="background-color: blue;color: #FFFFFF;border-radius: 0.3125rem;">View More</button>
						</span><br/>
            </div>
        </div>
    </div>
</section>
</body>
</html>
